<script setup>
import Left from '../components/Left'
import {useRoute, useRouter} from "vue-router";
import {ArrowDown, User as IconUser, Service, SwitchButton} from "@element-plus/icons-vue";

import {onMounted, reactive} from "vue";
import {User} from "@/utils/resource";
import {appStore} from "@/store/user";
import {commonStore} from "@/store/common";

const route = useRoute();
const router = useRouter();
const store = appStore()
const commonS = commonStore()

store.loadRoles()

const handleMenuClick = async function (cmd) {
  if (cmd === "1-1") {
    router.push({path: "/user/profile"})
  } else if (cmd === "1-2") {
    roleState.roleSelectShow = true
  } else if (cmd === "1-3") {
    await User.logout()
    await router.push({path: "/login"})
    setTimeout(() => {
      store.$reset()
    }, 300)
  }
}
const roleState = reactive({
  roleSelectShow: false,
  roleChange(data) {
    store.updateCurrentRole(data)
    this.roleSelectShow = false
  },
})

</script>
<template>
  <el-row class="height100" v-loading="commonS.loading">
    <el-col :sm="{span:6}" :md="{span:4}" :xs="{span:24}">
      <left class="height100"></left>
    </el-col>
    <el-col :sm="{span:18}" :md="{span:20}" :xs="{span:24}">
      <div class="my-header">
        <el-col :span="6">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
            <template v-if="route.meta.BreadcrumbList">
              <el-breadcrumb-item v-for="item in route.meta.BreadcrumbList" :to="item.path" :key="item.path">
                {{ item.name }}
              </el-breadcrumb-item>
            </template>
          </el-breadcrumb>
        </el-col>
        <el-col :span="18">
          <div class="flex-justify-end">
            <el-dropdown @command="handleMenuClick">
              <div class="flex-justify-end">
                <el-avatar :size="35" :src="store.user.avatar" style="margin-right: 5px"></el-avatar>
                {{ store.getNick}}
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
<!--                  <el-dropdown-item command="1-1">-->
<!--                    <el-icon>-->
<!--                      <icon-user/>-->
<!--                    </el-icon>-->
<!--                    个人信息-->
<!--                  </el-dropdown-item>-->
<!--                  <el-dropdown-item command="1-2">-->
<!--                    <el-popover-->
<!--                        placement="top"-->
<!--                        width="160"-->
<!--                        v-model:visible=" roleState.roleSelectShow">-->
<!--                      <template #reference>-->
<!--                        <div>-->
<!--                          <el-icon>-->
<!--                            <Service/>-->
<!--                          </el-icon>-->
<!--                          切换角色 （{{ store.currentRole.name }}）-->
<!--                        </div>-->
<!--                      </template>-->
<!--                      <p>选择角色</p>-->
<!--                      <el-select v-model=" store.currentRole.name" placeholder="请选择" @change=" roleState.roleChange">-->
<!--                        <el-option-->
<!--                            v-for="item in  store.roles"-->
<!--                            :key="item.id"-->
<!--                            :label="item.name"-->
<!--                            :value="item.name">-->
<!--                        </el-option>-->
<!--                      </el-select>-->
<!--                    </el-popover>-->
<!--                  </el-dropdown-item>-->
                  <el-dropdown-item command="1-3" divided>
                    <el-icon>
                      <switch-button/>
                    </el-icon>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </div>
        </el-col>
      </div>
      <el-row>
        <el-col :span="24" style="padding: 10px">
          <el-card>
            <router-view v-slot="{ Component }">
              <transition name="slide-fade">
                <component :is="Component"/>
              </transition>
            </router-view>
          </el-card>
        </el-col>
      </el-row>
    </el-col>

  </el-row>
</template>


<style lang="scss" scoped>
.my-header {
  background: #fff;
  padding: 0px 10px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
